//第几个json
var page = 1 ;

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var json = JSON.parse(xmlhttp.responseText);
            console.log(json.shop);
            //对数组进行循环
            for(let i = 0 ; i<json.shop.length; i++){
                console.log(json.shop[0]);
                //创建html结构
                var img = document.createElement('img');
                img.src = json.shop[i].pic;
                var h3 = document.createElement('h3');
                h3.innerHTML = json.shop[i].title;
                var p = document.createElement('p');
                p.innerHTML = json.shop[i].desc;

                var p2 = document.createElement('p');
                //p2.innerHTML = "¥";
                var span = document.createElement('span');
                span.innerHTML = "￥"+json.shop[i].price;
                p2.appendChild(span);
                var del = document.createElement('del');
                del.innerHTML = "￥"+json.shop[i].pricedel;
                span.appendChild(del);
                var div = document.createElement('div');
                div.appendChild(img);
                div.appendChild(h3);
                div.appendChild(p);
                div.appendChild(p2);


                console.log(div);
                //把所有的div追加到#list里面
                document.querySelector('#list').appendChild(div)

            }
        }
    };
    xmlhttp.open("GET",page +".json",true);
    xmlhttp.send();
}

loadXMLDoc();

document.querySelector('#btn').addEventListener('click',function(){
    if (page>= 4){
        page = 1  ;
    }else {
        page++;
    }
    //先清空
    document.querySelector('#list').innerHTML = '';
    //再取数据放到 #list里面

    loadXMLDoc()
});
